// 内置核心动画 - 弃用，迁移到使用animate.css二次开发，迁移完删除

@anim-prefix: ~"@{prefix}anim";

.@{anim-prefix} {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
}
// 循环
.@{anim-prefix}-loop {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
// 旋转
@-webkit-keyframes io-anim-rotate {
  /* 循环旋转 */
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes io-anim-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.@{anim-prefix}-rotate {
  animation-name: io-anim-rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@-webkit-keyframes io-anim-up {
  /* 从最底部往上滑入 */
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    opacity: 0.3;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes io-anim-up {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0.3;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.@{anim-prefix}-up {
  -webkit-animation-name: io-anim-up;
  animation-name: io-anim-up;
}

@-webkit-keyframes io-anim-upbit {
  /* 微微往上滑入 */
  from {
    -webkit-transform: translate3d(0, 30px, 0);
    opacity: 0.3;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes io-anim-upbit {
  from {
    transform: translate3d(0, 30px, 0);
    opacity: 0.3;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.@{anim-prefix}-upbit {
  -webkit-animation-name: io-anim-upbit;
  animation-name: io-anim-upbit;
}

@-webkit-keyframes io-anim-left {
  /* 微微往左滑入 */
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 0.3;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes io-anim-left {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: 0.3;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.@{anim-prefix}-left {
  -webkit-animation-name: io-anim-left;
  animation-name: io-anim-left;
}

@-webkit-keyframes io-anim-scale {
  /* 放大 */
  0% {
    opacity: 0.3;
    -webkit-transform: scale(.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes io-anim-scale {
  0% {
    opacity: 0.3;
    -ms-transform: scale(.5);
    transform: scale(.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.@{anim-prefix}-scale {
  -webkit-animation-name: io-anim-scale;
  animation-name: io-anim-scale
}

@-webkit-keyframes io-anim-scale-spring {
  /* 弹簧式放大 */
  0% {
    opacity: 0.5;
    -webkit-transform: scale(.5);
  }
  80% {
    opacity: 0.8;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes io-anim-scale-spring {
  0% {
    opacity: 0.5;
    transform: scale(.5);
  }
  80% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.@{anim-prefix}-scaleSpring {
  -webkit-animation-name: io-anim-scale-spring;
  animation-name: io-anim-scale-spring
}

@-webkit-keyframes io-anim-fadein {
  /* 渐现 */
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes io-anim-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.@{anim-prefix}-fadein {
  -webkit-animation-name: io-anim-fadein;
  animation-name: io-anim-fadein
}

@-webkit-keyframes io-anim-fadeout {
  /* 渐隐 */
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes io-anim-fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.@{anim-prefix}-fadeout {
  -webkit-animation-name: io-anim-fadeout;
  animation-name: io-anim-fadeout
}